<template>
    <div>
     
      <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click="click_but">
         <el-tab-pane  v-for="(item, index) in editableTabs" :key="index" :label="item.title" :name="item.name"></el-tab-pane>
      </el-tabs>

    </div>  
</template>

<script>
export default {
  name: 'tab',
  data () {
    return {
        editableTabsValue: '1',
        editableTabs: [{
          title: '导航守卫',
          name: '1',
          path:'',
        }],
        tabIndex: 1,
        newVal:'',
        my_name:''
    }
  },
  created(){
      
  },
   watch: {
    '$route.path': function (newVal, oldVal) {     
        this.newVal = this.$route.fullPath
        this.my_name = this.$route.meta.name
             
         for(let item of this.editableTabs) { 
            if(item.path == this.$route.fullPath){
                console.log("相同路由","ffff")
                console.log(item.name)
                this.editableTabsValue = item.name
                return false
            }
         }
        this.addTab(this.editableTabsValue)
        //console.log(this.$route,"dddddd")
     }
   },
  methods: {
      click_but(e){
            for(let item of this.editableTabs) {
  
                if(this.$route.path == item.path){
                    console.log("相同路由")
                }else if(e.name == item.name){
                     this.$router.push({path:item.path})
                 }
            }
        
      },
     addTab(targetName) {
          let newTabName = ++this.tabIndex + '';
          this.editableTabs.push({
            title: this.my_name,
            name: newTabName,
            path:this.newVal,
         });
        this.editableTabsValue = newTabName;
      },
      removeTab(targetName) {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        } 
        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
        
        let lenght = this.editableTabs.length - 1
        let go = this.editableTabs[lenght].path
        this.$router.push({path:go})
        //this.$router.go(-1)

      }
  }
}
</script>

<style scoped>
.el-tabs--card>>>.el-tabs__header{
  border:none;
  margin-bottom:0px;
}
 /* .el-tabs--card>>>.el-tabs__header .el-tabs__nav{
  border:none;
} */
.el-tabs--card>>>.el-tabs__header .el-tabs__item{
  background: white;
  border-radius:5px 5px 0px 0px;
}
/* .el-tabs--card>>>.el-tabs__header .el-tabs__item.is-active{
      border-right: 1px solid #E4E7ED;
}  */
 /*.el-tabs--card>>>.el-tabs__header .el-tabs__item.is-active.is-closable{
  color:white;
} */
</style>